{extend name="./public/base" /}
{block name="title"}首页{/block}
{block name="style"}
<style type="text/css">
	.content{
		width: 100%;
		background-color:#fff;
		font-size: 32px;
		color: #6e5858;
	}
	.list-content{
		padding-bottom:100px;
		height:1200px; 
		margin-top: 1px;
		overflow:auto;  
		z-index: 1
	}
	.top{
		width: 100%;
	    background-color: #ffba58;
	    height: 80px;
	    color: #fff;
	    text-align: center;
	    line-height: 80px;
	    font-size: 32px;
	}
	.banner{
		width: 100%;
		height: 20%;
		margin-top: 20px;
	}
	.swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #e97070;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    .search{
    	width: 100%;
    	height: 90px;
    	background-color: #faf2f2;
    	line-height: 80px;
    	margin-top: 20px;
    	text-align: center;
    }	
    .search span{
     	display: inline-block;
     	width: 35%;
     	text-align: center;
    }
    .search span input{
    	height: 30px;
    	border: none;
    }
    .search .button{
		background-color: #ffba58;
	    border-radius: 30px;
	    width: 14%;
	    color: #fff;
	    display: inline-block;
	    position: relative;
	    top: 8px;
	    line-height: 200%;
    }
    .list .weui-flex{
    	width: 50%;
    	float: left;
    	margin-top: 20px;
    }
    .list .weui-flex .weui-flex__item{
    	height: 530px;
    	text-align: center;
    }
    .line{
    	width: 100%;
    	height:2px;
    	background-color: #f6ecec;
    	margin-bottom: 20px;
    	margin-top: 20px;
    }
    .list{
    	background-color: #fcf8f8;
    }
    .weui-flex__item_content{
    	width: 90%;
    	margin: auto;
    	border: 1px solid #eaefea;
    	border-radius: 10px;
    	overflow: hidden;
    	box-shadow: 0px 12px 24px #888888;
    }
    .weui-flex__item .img{
    	width: 100%;
    	height: 70%;
    	
    }
    .weui-flex__item .name{
    	width: 100%;
	    height: 10%;
	    text-align: left;
	    padding: 10px 30px;
	    color: #888;
	    font-size: 32px;
    }
    .weui-flex__item .des{
    	width: 100%;
    	height: 15%;
    	margin: auto;
    	font-size: 28px;
    }
    .weui-flex__item .des span{
    	display: inline-block;
    }
    .weui-flex__item .des .des_text{
		color: #a6ea24;
		position: relative;
		left: -8%;
    }
    .weui-flex__item .des .des_add{
    	color: #8c90a6;
    	margin-left: 10px;
    }
    .weui-flex__item .des .des_add img{
    	position: relative;
    	top: 10px;
    }
    .weui-flex__item .des .des_text img{
    	position: relative;
    	top: 8px;
    }
    .both{
    	clear: both;
    	margin-bottom: 20px;
    }
    .search .input1{
    	display: inline-block;
    	width: 70%;
    }
    .search .input{
    	width: 80%;
	    height: 50px;
	    border-radius: 15px;
    }
    .weui-flex a{
    	width:100%;
    }
    /*.loadmore{
    	display: none;
    }*/

</style>
{/block}
{block name="main"}
	<div id="app_content" class="content weui-pull-to-refresh"> 
		<div class="weui-pull-to-refresh-layer" style="text-align: center">
	        <div class="pull-to-refresh-arrow"></div>
	        <div class="pull-to-refresh-preloader"></div>
	        <div class="down">下拉刷新...</div>
	       <!--  <div class="up">释放刷新</div>
	        <div class="refresh">正在刷新...</div> -->
	    </div>
		<div class="top" >
			<span>推荐</span>
		</div>
		<div class="banner">
			<div class="swiper-container">
			    <div class="swiper-wrapper">
			      <div class="swiper-slide" v-for="member in members">
			      	<img style="width: 100%;height: 100%;" :src="member.avatar"></div>
			    </div>
			    <div class="swiper-pagination"></div>
			</div>	
		</div>
		<div class="search">
			<span class="input1"><input style="font-size: 32px" class="input" placeholder="   search" type="text"/></span>
			<span class="button" @click="search()">搜索</span>
		</div>
		<div class="line"></div>
		<div class="list-content">
			<div class="list">
				<div class="weui-flex" v-for="member in members">
					<a :href="member.src">
						<div class="weui-flex__item">
						  	<div class="weui-flex__item_content">
							  	<div class="img"><img style="width: 100%;height: 100%" :src="member.avatar" alt=""></div>
							  	<div class="name">{{member.user_name}}</div>
							  	<div class="des"><span class="des_text"><img src="__STATIC__/images/online.png"> 1小时前</span><span class="des_add"><img src="__STATIC__/images/add2.png"> {{member.live_city}}</span></div>
						  	</div>
						</div>
					</a>
				</div>
				<!-- <div class="weui-flex" v-for="member in members">
					<a :href="member.src">
						<div class="weui-flex__item">
						  	<div class="weui-flex__item_content">
							  	<div class="img"><img style="width: 100%;height: 100%" :src="member.avatar" alt=""></div>
							  	<div class="name">{{member.user_name}}</div>
							  	<div class="des"><span class="des_text"><img src="__STATIC__/images/online.png"> 1小时前</span><span class="des_add"><img src="__STATIC__/images/add2.png"> {{member.live_city}}</span></div>
						  	</div>
						</div>
					</a>
				</div>		 -->
				<!-- <div class="weui-flex">
					<div class="weui-flex__item">
					  	<div class="weui-flex__item_content">
						  	<div class="img"><img style="width: 100%;height: 100%" src="__STATIC__/images/people1.jpg" alt=""></div>
						  	<div class="name">樱桃小丸子</div>
						  	<div class="des"><span class="des_text"><img src="__STATIC__/images/online.png"> 1小时前</span><span class="des_add"><img src="__STATIC__/images/add2.png"> 乌鲁木齐市</span></div>
					  	</div>
					</div>
				</div> -->
			</div>
			<div class="both"></div>
			<div class="weui-loadmore" v-if="loadmore">
	            <i class="weui-loading"></i>
	            <span class="weui-loadmore__tips">正在加载</span>
	        </div>
	        <div class="weui-loadmore" v-if="!loadmore">
	            <!-- <i class="weui-loading"></i> -->
	            <span class="weui-loadmore__tips">没有更多数据</span>
	        </div>
        </div>
		{include file="index@public/foot" /}
	</div>
{/block}
{block name="script"}
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/swiper.min.js"></script>
<script type="text/javascript" >
    $(document).ready(function(){ 
		//var host = "http://fast/api.php/";
		var host = "http://"+document.domain+"/api.php/";
		var vm  = new Vue({
			el: '#app_content',
			data: {
			    members: [],
			    text11:'12334',
			    man:"{:url('index')}",
			    woman:"{:url('index')}",
			    my:"{:url('my')}",
			    page:1,
			    loadmore:1,
			   
			},
		    methods:{
		        getMemberList:function(){
		        	var t = this;
		        	$.ajax({
		        		url: host+'member/list',
		        		type: 'post',
		        		dataType: 'json',
		        		data: {page: 1},
		        		success:function(data){
		        			console.log(data.code);
		        			if(data.code == 1){
		        				for(var i=0;i<data.data.length;i++){
		        					data.data[i].src = "{:url('detail')}?id="+data.data[i].id;
		        				}
		        				t.members = data.data;
		        				if(t.members.length <=6){
		        					t.loadmore = 0;
		        				}
		        				console.log(t.members);
		        			}else{
			    				t.loadmore = 0;
			    			}
		        		},
		        		error:function(e){
		        			console.log('error'+e);
		        		}
		        	})	
		        },
		        search:function(){
		        	console.log(2142345);
		        	window.location.href="{:url('search')}";
		        }
		    },
		    mounted: function () {
	            console.log("已初始化");
	            this.getMemberList();
	            //console.log();
	        }

		})
		console.log(vm);
		var swiper = new Swiper('.swiper-container', {
		    slidesPerView: 2.5,
		    spaceBetween: 30,
		    centeredSlides: false,
		    speed:300,
		    loop:true,
		    effect:'coverflow',
		    pagination: {
		        el: '.swiper-pagination',
		        type: 'bullets',
		    },
	    });
	    $('.list-content').infinite(0);
	    var loading = false;  //状态标记
		$('.list-content').infinite().on("infinite", function() {
			console.log('list');
			if(loading) return;
  			loading = true;
			var loadmore1 = vm.loadmore;  //状态标记
			console.log("biaoji"+vm.loadmore);
			if(loadmore1==0) return;
			if(!loading)return;
		  	setTimeout(function() {
			  	var page = vm.page+1;
			  	var where = 'type:1';
			  	loadmore(page,where);
			  	loading = false;
		  	}, 1500);   //模拟延迟
		});

		function loadmore(page,where){
			console.log('page:'+page);
			console.log('where:'+where);
			if(page ==1){
				page = 2;
			}
			$.ajax({
	    		url: host+'member/list',
	    		type: 'post',
	    		dataType: 'json',
	    		data: {page:page},
	    		success:function(data){
	    			console.log(data.code);
	    			if(data.code == 1){
	    				for(var i=0;i<data.data.length;i++){

	    					data.data[i].src = "{:url('detail')}?id="+data.data[i].id;
	    					vm.members.push(data.data[i]);
	    				}
	    				console.log('返回');
	    				console.log(vm.members);
	    				vm.page = vm.page+1;
	    				vm.loadmore = 1;
	    			}else{
	    				vm.loadmore = 0;
	    			}
	    		},
	    		error:function(e){
	    			console.log('error'+e);
	    		}
	    	})	
			return;
		}

		//下拉刷新
		//初始化
		// $('#app_content').pullToRefresh();
		// //当下拉刷新触发时
		// $('#app_content').on("pull-to-refresh",function(){
		// 	console.log('触发时刷新');
		// })
		// //完成
		// $('#app_content').pullToRefreshDone(function(){
		// 	console.log('完成刷新');
		// });
		var loading1 = true;
		$("#app_content").pullToRefresh().on("pull-to-refresh", function () {
	       setTimeout(function () {
	           console.log('刷新，，，，');
	           if (loading1) loading1 = false;
	           $("#app_content").pullToRefreshDone(); // 重置下拉刷新
	       }, 1500);   //模拟延迟
	    });
	});
</script>
{/block}